<template>
	<div class="zhiShiFenLei center align-start fWrap">
		<div class="right bfff left-bumen">
			<div class="title">
				<div
					class="c666 f14 hover title-left"
					:class="{ ctheme: i == navIndex }"
					v-for="(item, i) in nav"
					@click="onNav(item, i)"
				>
					{{ item.name }}
				</div>
			</div>
		</div>
		<div class="nav-dis" @click="drawer = true">分类</div>
		<el-drawer v-model="drawer" size="60%" :with-header="false">
			<div class="title">
				<div
					class="c666 f14 hover title-left"
					:class="{ ctheme: i == navIndex }"
					v-for="(item, i) in nav"
					@click="onNav(item, i)"
				>
					{{ item.name }}
				</div>
			</div>
		</el-drawer>
		<div class="left flex" v-if="!visible">
			<div class="bfff left-bottom">
				<div class="center flex-start fWrap table-head">
					<el-button
						type="primary"
						@click="addClassification"
						v-auth="['knowledge:kbCategory:add']"
						:size="large"
						>+新增</el-button
					>
				</div>
				<div class="table-scrol">
					<div class="table">
						<el-table :data="tableData" highlight-current-row style="width: 100%">
							<el-table-column
								align="center"
								prop="name"
								label="二级目录"
								show-overflow-tooltip
								min-width="200"
							/>
							<el-table-column
								align="center"
								prop="sort"
								label="权重"
								show-overflow-tooltip
								min-width="50"
							/>
							<el-table-column align="center" label="操作" min-width="200">
								<template #default="{ row }">
									<el-button
										icon="EditPen"
										plain
										@click="edit(row)"
										v-auth="['knowledge:kbCategory:edit']"
									>
									</el-button>
									<el-button
										icon="Delete"
										plain
										v-auth="['knowledge:kbCategory:delete']"
										@click="delList(row)"
									>
									</el-button>
								</template>
							</el-table-column>
							<template #empty>
								<el-empty description="暂无数据" />
							</template>
						</el-table>
						<div style="display: flex; justify-content: center">
							<v-pagination
								:total="total"
								v-model:size="pageSizes"
								v-model:page="current"
								@pagination="fetchList"
								@paginations="fetchLists"
							></v-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 新增权限分配 -->
		<div class="left flex bfff cheng-dialog" v-else>
			<div class="center title">
				<i class="iconfont f24 mr15">&#xe811;</i>
				<div class="f16 c333 flex">{{ title }}</div>
			</div>
			<el-form
				:label-position="labelPosition"
				ref="ruleFormRef"
				:model="ruleForm"
				:rules="rules"
				class="demo-ruleForm"
				:size="formSize"
				status-icon
			>
				<el-form-item label="分类名" prop="classify">
					<el-input
						class="name"
						v-model="ruleForm.classify"
						clearable
						placeholder="请输入分类名称"
						maxlength="20"
						show-word-limit
					/>
				</el-form-item>
				<el-form-item label="权重" prop="sort">
					<template #label>
						权重
						<el-tooltip class="box-item" effect="dark" content="数字越大越靠前" placement="top" :offset="0">
							<el-icon class="label-icon"><InfoFilled /></el-icon>
						</el-tooltip>
					</template>
					<template #default>
						<el-input-number v-model="ruleForm.sort" :min="1" />
					</template>
				</el-form-item>
				<el-form-item label="分类描述" prop="describe">
					<el-input
						type="textarea"
						:autosize="{ minRows: 4, maxRows: 8 }"
						class="name"
						v-model="ruleForm.describe"
						placeholder="请输入分类描述"
						maxlength="200"
						show-word-limit
					/>
				</el-form-item>
				<el-form-item label="知识分类权限">
					<div class="box">
						<div class="addCY">
							<el-button type="primary" link :icon="CirclePlusFilled" @click="onDialog"
								>添加成员</el-button
							>
						</div>
						<div class="knowledgeUser" v-for="(item, index) in zancun[currentName - 1]" :key="index">
							<div class="f16">{{ item.userName }}</div>
							<div v-if="!index == 0 || currentName != '1'">
								<div v-if="authsList[index + (currentName - 1) * 5]">
									<el-select
										v-model="authsList[index + (currentName - 1) * 5].kbAuth"
										placeholder="请选择"
									>
										<el-option
											v-for="item in qoptions"
											:key="item.code"
											:label="item.name"
											:value="+item.code"
										>
											<div class="option-content">
												<div class="f16 c60">{{ item.name }}</div>
												<div class="f14 c1c">{{ item.desc }}</div>
											</div>
										</el-option>
									</el-select>
									<el-button class="selectDel" @click="delAuth(index + (currentName - 1) * 5)"
										>删除</el-button
									>
								</div>
							</div>
							<div v-else style="color: #999">
								<span>所有者</span>
							</div>
						</div>
						<div class="pag-centent">
							<el-pagination
								layout="prev, pager, next"
								v-model:current-page="currentName"
								v-model:page-size="pageSize"
								:total="authsList.length"
							/>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="" class="form-footer">
					<div class="el-form-item__label"></div>
					<el-button @click="cancellationA">取消</el-button>
					<el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 新增成员 -->
		<el-dialog
			top="6vh"
			class="dialog"
			v-model="dialogVisible"
			:show-close="false"
			:close-on-click-modal="false"
			destroy-on-close
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/zhuTi/x6.png" alt="" />
					<div class="flex f16 fbold">新增成员</div>
					<el-icon class="pointer" size="20" color="#fff" @click="cancellationB">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content-cheng">
				<div class="fWrap center align-start">
					<div class="dleft">
						<el-tabs type="border-card" v-model="activeName" @tab-click="tabclick">
							<el-tab-pane label="按部门分类" name="department">
								<div class="tab-content">
									<div class="f18 c333 tCenter">部门列表</div>
									<div class="bfff tree-box">
										<el-tree
											@node-click="tabListStr"
											:data="dataSourceList"
											:props="defaultProps"
										></el-tree>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="按群组分类" name="group">
								<div class="tab-content">
									<div class="f18 c333 tCenter">群组列表</div>
									<div class="bfff tree-box">
										<el-tree
											@node-click="tabListStr"
											:data="dataSourceList"
											:props="defaultProps"
										></el-tree>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
					<div class="flex dright">
						<el-input v-model="searchText" class="search-input" placeholder="请输入用户名搜索">
							<template #append>
								<el-button class="search-btn" type="primary" :icon="Search" @click="onSearch"
									>搜索</el-button
								>
							</template>
						</el-input>
						<el-table
							ref="multipleTableRef"
							:data="tableDataCheng[currentTable - 1]"
							style="width: 100%"
							@select="onSelect"
							@select-all="selectAllTable"
							@cell-click="onSelects"
						>
							<el-table-column type="selection" min-width="15%" />
							<el-table-column prop="realName" min-width="75%">
								<template #default="{ row }">
									<div v-if="row.realName">{{ row.realName }}</div>
									<div v-if="row.name">{{ row.name }}</div>
								</template>
							</el-table-column>
						</el-table>
						<div style="display: flex; justify-content: center">
							<el-pagination
								layout="prev, pager, next"
								v-model:current-page="currentTable"
								v-model:page-size="pageSizeTable"
								:total="totalList"
								@current-change="asa"
							></el-pagination>
						</div>
					</div>
				</div>
				<div class="center choice">
					<div class="f16 c333">用户选择：</div>
					<div class="flex">
						<el-tag
							closable
							effect="plain"
							round
							v-for="(item, index) in authsList"
							:key="item.userId"
							@close="clickDelTag(index)"
							>{{ item.userName }}</el-tag
						>
					</div>
					<el-button class="clear-btn" type="warning" @click="delTableList">清空选择</el-button>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cancellationB">取消</el-button>
					<el-button type="primary" @click="onAddList"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import {
	Search,
	RefreshRight,
	EditPen,
	Delete,
	CirclePlusFilled,
	Upload,
	Refresh,
	InfoFilled,
} from "@element-plus/icons-vue"
import { useSettingStores } from "@/store/settings"
import { ElMessage, ElMessageBox } from "element-plus"

const settingStore = useSettingStores()
const labelPosition = computed(() => (settingStore.isMobile ? "top" : "right"))
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
//添加成员
const dataSourceList = ref([])
// 左侧一级目录
const nav = ref([])
//右侧二级分类
const tableData = ref([])
const navIndex = ref("0")
const navId = ref("")
//title
const title = ref("")
const total = ref(0)
const totalList = ref(null)
const current = ref(1)
const currentTable = ref(1)
const fabu = ref(false)
const currentName = ref(1)
// 新增权限分配
const visible = ref(false)
const dialogVisible = ref(false)
const ruleFormRef = ref()
const defaultProps = reactive({
	children: "children",
	label: "name",
})
//已勾选的分类
const classificationStr = ref([])

//
const activeName = ref("department")
const ruleForm = reactive({
	classify: "", //分类
	// knowledge: "", //目录
	sort: 1, //排序
	describe: "", //描述
	// label: [], //标签
})
//添加成员
const tableDataCheng = ref([])

const was = ref([])
const enums = ref([])
const searchText = ref([])
const pageSizeTable = ref(8)
const drawer = ref(false)
const pageSizes = ref(10)
const authsList = ref([])
const staging = ref([])
const qoptions = ref([])
const rules = reactive({
	classify: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
})
const editId = ref("")
const typeStr = ref(null)
const checked1 = ref(true)
const checked2 = ref(false)
const submitForm = async formEl => {
	if (fabu.value) {
		return
	} else {
		fabu.value = true
		if (!formEl) return
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				try {
					const obj = {}
					if (editId.value != "") {
						obj.id = editId.value
					}
					obj.name = ruleForm.classify
					obj.swId = navId.value
					obj.status = "1"
					obj.remark = ruleForm.describe
					obj.sort = ruleForm.sort
					const objStr = []
					let quanxian = false
					authsList.value.forEach(item => {
						if (item.kbAuth == null) {
							quanxian = true
						} else {
							objStr.push({
								userId: item.userId,
								kbAuth: item.kbAuth,
								status: item.status,
								status: item.status,
							})
						}
					})
					obj.authsList = objStr
					if (!quanxian) {
						if (editId.value == "") {
							try {
								await postAxios("/knowledge/kbCategory/add", obj)
								ElMessage.success("新增成功")
								const indexs = nav.value.findIndex(item => item.id == navId.value)
								navIndex.value = indexs
								tableData.value = await getAxios(
									`/knowledge/kbCategory/findBySwWid?swId=${navId.value}`
								)
								delForm()
								visible.value = false
							} catch (error) {
								ElMessage.error(error)
								fabu.value = false
							}
						} else {
							try {
								const indexs = nav.value.findIndex(item => item.id == navId.value)
								navIndex.value = indexs
								await postAxios("/knowledge/kbCategory/edit", obj)
								ElMessage.success("修改成功")
								tableData.value = await getAxios(
									`/knowledge/kbCategory/findBySwWid?swId=${navId.value}`
								)
								delForm()
								visible.value = false
							} catch (error) {
								ElMessage.error(error)
								fabu.value = false
							}
						}
					} else {
						ElMessage.error("权限未选择")
						fabu.value = false
					}
				} catch (error) {
					ElMessage.error("至少添加一位用户")
					fabu.value = false
				}
			}
		})
	}
}
//清空表单
function delForm() {
	zancun.value = []
	authsList.value = [
		{
			userName: "",
			userId: "",
			kbAuth: 5, //状态
			status: 1,
		},
	]
	ruleForm.classify = ""
	ruleForm.sort = 1
	ruleForm.describe = ""
}
async function created() {
	const res = await getAxios("/knowledge/kbSubjectWarehouse/page")
	if (res) {
		nav.value = res
		res.forEach((item, index) => {
			if (item.name == route.query.name) {
				navIndex.value = index
			}
		})
		if (route.query.id) {
			const ress = await getAxios(
				`/knowledge/kbCategory/findBySwWidToBackstage?swId=${route.query.id}&current=1&size=10`
			)
			tableData.value = ress
			navId.value = route.query.id
		} else {
			const ress = await getAxios(
				`/knowledge/kbCategory/findBySwWidToBackstage?swId=${nav.value[0].id}&current=1&size=10`
			)
			tableData.value = ress
			navId.value = nav.value[0].id
		}
	}
}
created()
const onNav = async (item, index) => {
	navIndex.value = index
	visible.value = false
	tableData.value = await getAxios(`/knowledge/kbCategory/findBySwWid?swId=${item.id}`)
	// delForm()
	navId.value = item.id
}
const cellClick = row => {
	classificationStr.value = row
}
const addClassification = async () => {
	editId.value = ""
	title.value = "新增知识分类"
	fabu.value = false
	visible.value = true
	const user = await getAxios("/system/sysUser/selectById")
	authsList.value = [
		{
			userName: user.realName,
			userId: user.id,
			kbAuth: 5, //状态
			status: 1,
		},
	]
	zancun.value = sliceArr(authsList.value, pageSize.value)
	qoptions.value = await getAxios("/system/enums/list?enumName=KbAuth&moduleName=knowledge")
}
const edit = async row => {
	editId.value = ""
	title.value = "编辑知识分类"
	visible.value = true
	fabu.value = false
	qoptions.value = await getAxios("/system/enums/list?enumName=KbAuth&moduleName=knowledge")
	const res = await getAxios(`/knowledge/kbCategory/findById?id=${row.id}`)
	ruleForm.classify = res.name
	ruleForm.sort = res.sort
	ruleForm.describe = res.remark
	authsList.value = res.authsList
	editId.value = res.id
	zancun.value = sliceArr(authsList.value, pageSize.value)
}

//删除
const delList = async val => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		try {
			const res = await postAxios(`/knowledge/kbCategory/delete?id=${val.id}`)
			ElMessage.success("删除成功")
			tableData.value = await getAxios(`/knowledge/kbCategory/findBySwWid?swId=${navId.value}`)
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
const delAuth = index => {
	if (authsList.value.length > 1) {
		authsList.value.splice(index, 1)
	} else {
		ElMessage.error("最少保留一条")
	}
	zancun.value = sliceArr(authsList.value, pageSize.value)
}
//添加成员
const onDialog = val => {
	staging.value = []
	dialogVisible.value = true
	typeStr.value = "1"
	totalList.value = null
	staging.value = JSON.parse(JSON.stringify(authsList.value))
	department()
}
const tabclick = event => {
	if (event.props.label == "按部门分类") {
		typeStr.value = 1
	} else {
		typeStr.value = 2
	}
	department()
	tableDataCheng.value = []
}
async function department() {
	if (typeStr.value == 1) {
		dataSourceList.value = await getAxios("/system/sysDept/list")
	} else {
		dataSourceList.value = await getAxios("/knowledge/kbGroups/list")
	}
}

//新增成员点击左侧
const tabListStr = async data => {
	if (typeStr.value == "2") {
		const res = await getAxios(`/knowledge/kbGroups/listById?pId=${data.id}&current=1&size=${pageSizeTable.value}`)
		const ress = await getAxios(`/knowledge/kbGroups/listFind?id=${data.id}&current=1&size=${pageSizeTable.value}`)
		let list = []
		ress.records.forEach(item => {
			list.push(item)
		})
		res.forEach(item => {
			list.push(item)
		})
		tableDataCheng.value = list
		tableDataCheng.value = sliceArr(tableDataCheng.value, pageSizeTable.value)
		totalList.value = +tableDataCheng.value.length
	} else {
		const res = await getAxios(`/system/sysDept/list?parentId=${data.id}&current=1&size=8`)
		const ress = await getAxios(`/system/sysUser/page?current=1&size=8&deptId=${data.id}`)
		let list = []
		ress.records.forEach(item => {
			list.push(item)
		})
		res.forEach(item => {
			list.push(item)
		})
		tableDataCheng.value = list
		tableDataCheng.value = sliceArr(tableDataCheng.value, pageSizeTable.value)
		totalList.value = +tableDataCheng.value.length
	}
}
const zancun = ref([])
const pageSize = ref(5)
const onAddList = () => {
	dialogVisible.value = false
	staging.value = JSON.parse(JSON.stringify(authsList.value))
	tableDataCheng.value = []
	zancun.value = sliceArr(authsList.value, pageSize.value)
}
const sliceArr = (arr, pageSize) => {
	const result = []
	let count = 0
	while (count * pageSize < arr.length) {
		result.push(arr.slice(count * pageSize, pageSize * (count + 1)))
		count++
	}
	return result
}

const multipleTableRef = ref()
const onSelect = (val, row) => {
	const index = authsList.value.findIndex(item => item.userId == row.id)
	if (index != "-1") {
		authsList.value.splice(index, 1)
	} else {
		if (typeStr.value == "1") {
			if (row.name) {
				authsList.value.push({
					userName: row.name,
					userId: row.id,
					kbAuth: 1,
					status: 3,
				})
			} else {
				authsList.value.push({
					userName: row.realName,
					userId: row.id,
					kbAuth: 1,
					status: 1,
				})
			}
		} else {
			if (row.name) {
				authsList.value.push({
					userName: row.name,
					userId: row.id,
					kbAuth: 1,
					status: 2,
				})
			} else {
				authsList.value.push({
					userName: row.realName,
					userId: row.id,
					kbAuth: 1,
					status: 1,
				})
			}
		}
	}
}
const onSelects = row => {
	const index = authsList.value.findIndex(item => item.userId == row.id)
	if (index != "-1") {
		authsList.value.splice(index, 1)
	} else {
		if (typeStr.value == "1") {
			if (row.name) {
				authsList.value.push({
					userName: row.name,
					userId: row.id,
					kbAuth: 1,
					status: 3,
				})
			} else {
				authsList.value.push({
					userName: row.realName,
					userId: row.id,
					kbAuth: 1,
					status: 1,
				})
			}
		} else {
			if (row.name) {
				authsList.value.push({
					userName: row.name,
					userId: row.id,
					kbAuth: 1,
					status: 2,
				})
			} else {
				authsList.value.push({
					userName: row.realName,
					userId: row.id,
					kbAuth: 1,
					status: 1,
				})
			}
		}
	}
}
watch(tableDataCheng, () => {
	nextTick(() => {
		if (tableDataCheng.value.length) {
			tableDataCheng.value[currentTable.value - 1].forEach(item => {
				if (authsList.value.some(v => v.userId == item.id)) {
					multipleTableRef.value.toggleRowSelection(item, true)
				} else {
					multipleTableRef.value.toggleRowSelection(item, false)
				}
			})
		}
	})
})
watch(currentTable, () => {
	nextTick(() => {
		if (tableDataCheng.value.length) {
			tableDataCheng.value[currentTable.value - 1].forEach(item => {
				if (authsList.value.some(v => v.userId == item.id)) {
					multipleTableRef.value.toggleRowSelection(item, true)
				} else {
					multipleTableRef.value.toggleRowSelection(item, false)
				}
			})
		}
	})
})
watch(
	authsList,
	(newValue, oldValue) => {
		nextTick(() => {
			if (tableDataCheng.value.length) {
				tableDataCheng.value[currentTable.value - 1].forEach(item => {
					if (authsList.value.some(v => v.userId == item.id)) {
						multipleTableRef.value.toggleRowSelection(item, true)
					} else {
						multipleTableRef.value.toggleRowSelection(item, false)
					}
				})
			}
		})
	},
	{ deep: true }
)
const clickDelTag = index => {
	if (authsList.value.length == 1) {
		return ElMessage.error("最少保留一个")
	}
	if (index != 0) {
		authsList.value.splice(index, 1)
	} else {
		ElMessage.error("不能删除创建者")
	}
}
const selectAllTable = row => {
	if (row.length == 0) {
		tableDataCheng.value[currentTable.value - 1].forEach(it => {
			const index = authsList.value.findIndex(item => item.userId == it.id)
			if (index != "-1") {
				authsList.value.splice(index, 1)
			}
		})
	} else {
		row.forEach(i => {
			const index = authsList.value.findIndex(item => item.userId == i.id)
			if (index == "-1") {
				if (typeStr.value == "1") {
					if (i.name) {
						authsList.value.push({
							userName: i.name,
							userId: i.id,
							kbAuth: 1,
							status: 2,
						})
					} else {
						authsList.value.push({
							userName: i.realName,
							userId: i.id,
							kbAuth: 1,
							status: 1,
						})
					}
				} else {
					if (i.name) {
						authsList.value.push({
							userName: i.name,
							userId: i.id,
							kbAuth: 1,
							status: 3,
						})
					} else {
						authsList.value.push({
							userName: i.realName,
							userId: i.id,
							kbAuth: 1,
							status: 1,
						})
					}
				}
			}
		})
	}
}
//全部清空
const delTableList = () => {
	authsList.value.splice(1)
}
//用户添加取消
const cancellationB = () => {
	// delForm()
	authsList.value = JSON.parse(JSON.stringify(staging.value))
	dialogVisible.value = false
	tableDataCheng.value = []
}
const cancellationA = () => {
	delForm()
	visible.value = false
}
const onSearch = async () => {
	const { user, dept } = await getAxios(`/system/sysUser/findToDept?type=3&name=${searchText.value}`)
	tableDataCheng.value = [...user, ...dept]
	tableDataCheng.value = sliceArr(tableDataCheng.value, pageSizeTable.value)
	totalList.value = +user.length + +dept.length
	searchText.value = ""
}
const fetchList = async val => {
	current.value = val
	const res = await getAxios(`/system/sysUser/page?current=${val}&size=${pageSizes.value}&deptId=${dataId.value}`)
	total.value = +res.total
	departmentList.value = res.records
}
const fetchLists = async val => {
	pageSizes.value = val
	const res = await getAxios(`/system/sysUser/page?current=${current.value}&size=${val}&deptId=${dataId.value}`)
	total.value = +res.total
	departmentList.value = res.records
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.nav-dis {
	width: 25px;
	padding: 10px 0;
	text-align: center;
	background-color: #2972fa;
	color: #fff;
	display: none;
	position: fixed;
	top: 50px;
	left: 0;
	z-index: 999;
	border-radius: 3px;
	@include maxWidth(768) {
		display: block;
	}
}
.option-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.zhiShiFenLei {
	background-color: #f8f8f8;
	height: 100%;
	.title-left {
		padding-left: 20px;
		padding-block: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.cheng-dialog {
		padding: 30px 25px;

		.form-footer {
			padding-top: 30px;

			:deep(.el-button) {
				margin-right: 30px;
			}
		}

		.paixu-label {
			padding-left: 40px;
			padding-right: 20px;
		}

		.title {
			padding-bottom: 50px;
		}

		:deep(.el-form-item__label) {
			width: 200px;
			color: #606266;
			padding: 0 12px 0 0;
			white-space: nowrap;
			@include maxWidth(1024) {
				width: 150px;
			}
			@include maxWidth(768) {
				width: 100px;
			}
			@include maxWidth(500) {
				width: 80px;
			}
		}
		.box {
			// height: 400px;
			width: 100%;
			overflow-y: auto;
			.addCY {
				display: flex;
				width: 100%;
				justify-content: flex-end;
			}
			.knowledgeUser {
				font-size: 14px;
				padding: 10px 20px;
				display: flex;
				width: 100%;
				justify-content: space-between;
				border-bottom: 1px solid #f4f4f4;
				.select-item {
					display: inline-flex;
					width: 100px;
					margin-right: 7px;
					// .selectDel {
					// 	cursor: pointer;
					// 	margin-left: 10px;
					// 	// width: 10px;
					// 	font-size: 14px;
					// }
				}
			}
		}
	}

	// :deep(.el-table__header-wrapper) {
	// 	display: none;
	// }

	:deep(.el-checkbox-group) {
		padding-left: 40px;
	}

	.right {
		width: 250px;
		height: 100%;
		overflow-y: scroll;
		border-right: 1px solid #ebeef5;
		@include maxWidth(1400) {
			width: 220px;
		}
		@include maxWidth(1024) {
			width: 200px;
		}
		@include maxWidth(900) {
			width: 170px;
		}
		@include maxWidth(768) {
			display: none;
		}

		.title {
			.ctheme {
				background: #f0f5ff;
			}
		}
	}

	:deep(.el-radio__input.is-checked .el-radio__inner::after) {
		background: #fff;
	}
	:deep(.dialog) {
		width: 800px !important;
	}
	:deep(.cheng-dialog .bu-select) {
		width: 100% !important;
	}

	:deep(.bu-select .el-input__wrapper) {
		border-radius: 5px 0 0 5px !important;
	}

	:deep(.cheng-dialog .el-select__tags .el-tag--info) {
		background: #f4faff;
		border: 1px solid #2972fa;
		border-radius: 20px;
		font-size: 25px;
		color: #2972fa;
	}

	.left-bottom {
		padding: 20px;

		.table-head {
			margin-bottom: 30px;

			.primary {
				width: 90px;
				height: 30px;
				border-radius: 3px;
			}

			.danger {
				width: 90px;
				height: 30px;
				border-radius: 3px;
				margin-left: 10px;
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
		}

		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 50px;
			color: #303133;
		}
	}

	.left {
		margin: 25px;
		// height: 100%;
		overflow-y: scroll;
	}
}
.box-item {
	display: flex;
	.left {
		width: 35%;
		padding: 0 25px;
		margin: 0;
	}
	.right {
		width: 60%;
		padding: 20px;
	}
}

.dialog-content-cheng {
	:deep(.choice .el-tag) {
		height: 30px;
		background: #f4faff;
		margin-left: 20px;
		padding: 0 15px;
		margin-bottom: 7px;
	}

	.choice {
		margin-top: 20px;
		padding: 20px 40px 20px 40px;
		border-top: 1px solid rgba(41, 114, 250, 0.2);
		border-bottom: 1px solid rgba(41, 114, 250, 0.2);
	}

	:deep(.clear-btn) {
		width: 80px;
		height: 30px;
		border-radius: 5px;
	}

	:deep(.el-table th.el-table__cell) {
		background: #f4faff;
	}

	:deep(.el-table) {
		margin-top: 20px;
		color: #787a7e;
	}

	:deep(.search-input .el-input__wrapper) {
		height: 30px;
		background-color: #f5f6f7;
	}

	.search-btn {
		background-color: #2972fa;
		color: #fff;
		height: 30px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		font-size: 12px;
		padding-top: 7px;
	}

	.dleft {
		width: 40%;
		margin: 0;
		margin-right: 20px;
	}

	:deep(.el-tree-node__content:hover) {
		background: #f4faff;
	}

	:deep(.el-tree-node__expand-icon) {
		color: #006eff;
	}

	:deep(.el-tree-node__expand-icon.is-leaf) {
		color: #fff;
	}

	.tree-box {
		height: 400px;
		margin-top: 20px;
		padding: 20px 10px;
		overflow-y: auto;
	}

	.tab-content {
		background: #f4faff;
		border: 1px solid #e6ebf5;
		border-radius: 5px;
		padding: 30px 20px;
	}
}
.label-icon {
	margin-left: 10px;
	padding-top: 15px;
}
:deep(.el-form-item__content) {
	@include maxWidth(768) {
		flex-wrap: nowrap;
	}
}
:deep(.el-select--small) {
	@include maxWidth(1400) {
		width: 13vw;
	}
	@include maxWidth(768) {
		width: 15vw;
	}
}
:deep(.el-input__suffix) {
	@include maxWidth(500) {
		display: none;
	}
}
.left-bumen {
	@include maxWidth(768) {
		display: none;
	}
}
.elTag {
	margin-top: 10px;
	// margin-left: 42%;
}
.pag-centent {
	display: flex;
	justify-content: center;
}
// :deep(.el-button) {
// 	&:focus {
// 		color: #606266;
// 		background-color: #fff;
// 	}
// }
</style>
